<!--设备管理-->
<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <!--搜索条件-->
            <el-row class="text-left">

                <el-col :span="15">
                    <div class="dlblock-mb20">
                        <span class="pr5">绑定车辆</span>
                        <el-input v-model.trim="query.vehicleInfo" size="medium" placeholder="车牌或自编号"
                                  style="width: 150px;"
                                  :maxlength="20" show-word-limit clearable></el-input>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">设备编号</span>
                        <el-input v-model.trim="query.deviceInfo" size="medium" placeholder="编号或手机号"
                                  style="width: 150px;"
                                  :maxlength="20" show-word-limit clearable></el-input>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">设备类型</span>
                        <el-select v-model="query.type" style="width: 150px" clearable>
                            <el-option label="全部" value=""></el-option>
                            <el-option label="未设置" value="0"></el-option>
                            <el-option label="调度设备" value="1"></el-option>
                            <el-option label="视频设备" value="2"></el-option>
                            <el-option label="客流设备" value="3"></el-option>
                            <el-option label="主动安全设备" value="4"></el-option>
                            <el-option label="危险品检测设备" value="5"></el-option>
                            <el-option label="公交卡刷卡机" value="6"></el-option>
                        </el-select>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">设备状态</span>
                        <el-select v-model="query.state" style="width: 150px" clearable>
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已启用" value="0"></el-option>
                            <el-option label="未启用" value="1"></el-option>
                        </el-select>
                    </div>

                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="query.page = 1,queryDevice()" class="el-icon-search ml5" circle></el-button>
                    </div>
                </el-col>

                <el-col :span="9" align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <router-link :to="{path: '/device/edit'}">
                            <el-button type="primary">添加</el-button>
                        </router-link>
                    </div>

                    <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="deleteAll">删除</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="primary" @click="downloadBtn()">下载模板</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-upload
                                class="text-right"
                                name="file"
                                ref="upload"
                                action="http://192.168.1.21:2563/api/web/taxi/ba/device/importDevice"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :auto-upload="false">
                            <el-button slot="trigger" size="medium" type="primary">模板导入</el-button>
                            <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">
                                确定导入
                            </el-button>
                        </el-upload>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="info" @click="exportDevice">导出列表</el-button>
                    </div>

                </el-col>

            </el-row>

            <!--表格-->
            <el-row>
                <el-table
                        class="my-table"
                        :data="deviceList" stripe
                        v-loading="loading"
                        :header-row-class-name="'my-table-header'"
                        @selection-change="selectionchange"
                        ref="myTable"
                        border>
                    <el-table-column align="center" type="selection" fixed width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="id" label="ID" v-if="false"></el-table-column>
                    <el-table-column align="center" prop="groupName" label="机构名称"></el-table-column>
                    <el-table-column align="center" prop="no" label="设备编号" width="130px"></el-table-column>
                    <el-table-column align="center" prop="vehicleNo" label="绑定车牌"></el-table-column>
                    <el-table-column align="center" prop="phone" label="手机号" width="130px"></el-table-column>
                    <el-table-column align="center" prop="type" label="设备类型">
                        <template slot-scope="{row}">
                            <p v-if="row.type==0">未设置类型</p>
                            <p v-else-if="row.type==1">调度设备</p>
                            <p v-else-if="row.type==2">视频设备</p>
                            <p v-else-if="row.type==3">客流设备</p>
                            <p v-else-if="row.type==4">主动安全设备</p>
                            <p v-else-if="row.type==5">危险品检测设备</p>
                            <p v-else-if="row.type==6">公交卡刷卡机</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="protocol" label="协议类型">
                        <template slot-scope="{row}">
                            <p v-if="row.protocol==0">未设置协议</p>
                            <p v-else-if="row.protocol==1">
                                JT808协议</p>
                            <p v-else-if="row.protocol==2">
                                Lanz私有协议</p>
                            <p v-else-if="row.protocol==3">
                                Lanz定制协议</p>
                            <p v-else-if="row.protocol==4">
                                海康扩展的JT808协议</p>
                            <p v-else-if="row.protocol==5">
                                青研扩展的JT808协议</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="network" label="入网类型"></el-table-column>
                    <el-table-column align="center" prop="commun" label="通信类型"></el-table-column>
                    <el-table-column align="center" width="200" prop="speed" label="限速(km/h)"></el-table-column>
                    <el-table-column align="center" prop="locator" label="定位" width="150">
                        <template slot-scope="{row}">
                            <p v-if="row.locator==0">无定位装置</p>
                            <p v-else-if="row.locator==1">
                                GPS定位系统</p>
                            <p v-else-if="row.locator==2">
                                北斗定位系统</p>
                            <p v-else-if="row.locator==3">
                                GPS和北斗定位系统</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="differential" label="差分定位">
                        <template slot-scope="{row}">
                            <p v-if="row.differential==0">未设置</p>
                            <p v-else-if="row.differential==1">不支持</p>
                            <p v-else-if="row.differential==2">支持</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="brand" label="品牌"></el-table-column>
                    <el-table-column align="center" prop="manufacturer" label="制造商"></el-table-column>
                    <el-table-column align="center" label="操作" fixed="right">
                        <template slot-scope="{row}">
                            <p>
                                <router-link :to="{path:'/device/edit',query:{device:row}}">
                                    <el-button type="text" style="color: #409eff">编辑</el-button>
                                </router-link>

                                <el-button type="text" style="color: #f56c6c" @click="deleteOne(row.id)">删除</el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <!--表格结束-->
            <br>
            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :span="12" :offset="6" align="center">
                    <el-pagination background layout="total, prev, pager, next" :total="query.total"
                                   :page-size="query.size"
                                   :current-page="query.page" @current-change="pageChange">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>

    import {deleteDevice, getDeviceInfo} from '@/api';
    import config, {downloadToTagByA} from '@/utils/config'

    export default {
        name: "index1",
        components: {},
        data() {
            return {
                config,
                //加载动画
                loading: false,

                //对话框
                dialogExportVisible: false,

                //设备列表
                deviceList: [],

                //设备查询参数
                query: {
                    deviceInfo: '',
                    vehicleInfo: '',
                    type: '',
                    state: '',
                    isBlind: 0,
                    total: 0,
                    size: 18,
                    page: 1
                },

                //设备导出参数
                exportDeviceVal: {
                    fromPage: 1,
                    toPage: 1,
                },

                //全选id
                deviceIds: [],

                //复选框 序号
                number: [],
                checked: false,
            }
        },

        watch: {
            'exportDeviceVal.fromPage': function (value) {
                let reg = /^[+]{0,1}(\d+)$/g;
                if (value == undefined || value == '') {

                } else if (!reg.test(value)) {
                    this.exportDeviceVal.fromPage = ''
                }
            },
            'exportDeviceVal.toPage': function (value) {
                let reg = /^[+]{0,1}(\d+)$/g;
                if (value == undefined || value == '') {

                } else if (!reg.test(value)) {
                    this.exportDeviceVal.toPage = ''
                }
            }
        },

        methods: {

            //导出设备模板
            downloadBtn() {
                downloadToTagByA("/api/web/taxi/ba/device/exportTemplate", {
                    time: this.date,
                })
            },

            handlePreview(file) {
            },
            handleRemove(file, fileList) {
            },
            submitUpload() {
                this.queryDevice()
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
            },

            checkAll() {
                if (this.checked == false) {
                    this.deviceIds = []
                    this.number = [];
                } else {
                    this.deviceList.forEach((item) => {
                        this.number.push(item.id)
                        this.deviceIds.push(item.id)
                    })
                }
            },

            //查询设备
            queryDevice() {
                console.log(this.query.page)
                getDeviceInfo({
                    pageNum: this.query.page
                }).then(res => {
                    if (res != null && res.code == 200) {
                        this.deviceList = res.data.list;
                        this.query.total = res.data.count
                    } else {
                        this.$message.info(res.message)
                    }
                })
            },

            //车辆多选
            selectionchange(val) {
                this.deviceIds = []
                val.forEach(x => {
                    this.deviceIds.push(x.id)
                });
            },

            //删除全部
            deleteAll() {
                if (this.deviceIds.length != 0) {
                    this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteDevice(this.deviceIds).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.queryDevice()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择设备'});
                }
            },

            //删除方法---弹窗
            deleteOne(id) {
                this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deviceIds = []
                    this.deviceIds.push(id)
                    deleteDevice(this.deviceIds).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.queryDevice()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },

            //导出
            exportDevice() {
                let a = document.createElement('a')
                a.href = "http://192.168.1.21:2563/api/web/taxi/ba/device/exportDevice?groupId=111"
                a.click();
            },

            // 分页查询
            pageChange(val) {
                this.query.page = val
                this.queryDevice()
            },

        },

        created() {
            this.queryDevice()
        }

    }
</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
    }
</style>
